<template>
  <div id="sigin-in-subscribe-app">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,i) in carousel_imgs_url" :key="i" @click="toLink">
        <img :src="item" style="width: 100%; height: 100%;" />
      </van-swipe-item>
    </van-swipe>
    <main class="main">
      <div class="main-item">
        <span class="main-color">{{manage_award}}</span>
        <span class="fs-11 color-666">管理奖</span>
      </div>
      <div class="main-item">
        <span class="main-color">{{grade_name}}</span>
        <span class="fs-11 color-666">星级</span>
      </div>
      <div class="main-item">
        <span class="main-color">{{performance_total}}</span>
        <span class="fs-11 color-666">业绩</span>
      </div>
    </main>

    <van-cell-group inset style="margin: 0;">
      <van-cell is-link @click="gotoUrl('sigin_in_subscribe_information')">
        <template #title>
          <img src="../../../assets/images/sign_in_subscribe/app/information.png" />
          <span>实名认证</span>
        </template>
      </van-cell>
      <van-cell is-link @click="gotoUrl('sigin_in_subscribe_withdraw')">
        <template #title>
          <img src="../../../assets/images/sign_in_subscribe/app/withdraw-record.png" />
          <span>立即提现</span>
        </template>
      </van-cell>
      <van-cell is-link @click="gotoUrl('sigin_in_subscribe_details')">
        <template #title>
          <img src="../../../assets/images/sign_in_subscribe/app/details.png" />
          <span>提现记录</span>
        </template>
      </van-cell>
      <van-cell is-link @click="gotoUrl('sigin_in_subscribe_income')">
        <template #title>
          <img src="../../../assets/images/sign_in_subscribe/app/order-management.png" />
          <span>收入记录</span>
        </template>
      </van-cell>
      <van-cell is-link @click="gotoUrl('sigin_in_subscribe_collection')">
        <template #title>
          <img src="../../../assets/images/sign_in_subscribe/app/collection.png" />
          <span>收款信息</span>
        </template>
      </van-cell>
      <van-cell is-link @click="show_Invoice">
        <template #title>
          <img src="../../../assets/images/sign_in_subscribe/app/platform-invoice.png" />
          <span>发票信息</span>
        </template>
      </van-cell>
      <van-cell is-link @click="log_out">
        <template #title>
          <img src="../../../assets/images/sign_in_subscribe/app/log-out.png" />
          <span>退出登录</span>
        </template>
      </van-cell>
    </van-cell-group>

    <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div style="display: flex; align-items: center; margin-bottom: 1.2188rem;">
            <span style="flex: 1; font-size: 0.9375rem;">发票信息</span>
            <van-icon name="cross" @click="show=false" />
          </div>
          <div style="text-align: left; font-size: 12px;">
            <div style="margin-bottom: 1.125rem;">
              <span class="invoice-main-color">公司名称：</span>
              <span>{{company_name}}</span>
            </div>
            <div style="margin-bottom: 1.125rem;">
              <span class="invoice-main-color">纳税人识别号：</span>
              <span>{{taxpayer_code}}</span>
            </div>
            <div>
              <span class="invoice-main-color">开票名称：</span>
              <span>{{ticket_name}}</span>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carousel_imgs_url: [],
      carousel_h5_link: "",
      manage_award: 0,
      performance_total: 0,
      grade_name: "",
      shop_name: "",
      show: false,
      company_name: "",
      taxpayer_code: "",
      ticket_name: ""
    };
  },
  activated() {
    this.getData();

  },
  methods: {
    async getInvoice() {
      let { result, msg, data } = await $http.get("plugin.sign-buy.frontend.sign-buy-app.invoice",{},".");
      if (result == 0) return this.$toast(msg);
      if(data){
        this.show = true;
        this.company_name = data.company_name;
        this.taxpayer_code = data.taxpayer_code;
        this.ticket_name = data.ticket_name;
      }
    },
    async getData() {
      let { result, msg, data: { carousel_h5_link, carousel_imgs_url, manage_award, grade_name, performance_total }
      } = await $http.get("plugin.sign-buy.frontend.sign-buy-app.index",{},".");
      this.carousel_imgs_url = carousel_imgs_url;
      this.carousel_h5_link = carousel_h5_link;
      this.manage_award = manage_award;
      this.grade_name = grade_name;
      this.performance_total = performance_total;
    },
    show_Invoice() {
      this.getInvoice();
    },
    toLink(){
      if(this.carousel_h5_link)  window.location.href = this.carousel_h5_link;
    },
    log_out() {
      $http.get("member.logout.index").then(
        response => {
          if (response.result == 1) {
            window.localStorage.setItem("isWxLogin", -1);
            localStorage.setItem("token", "");
            localStorage.setItem("loginUid", "");
            window.firstLogin = 0;
            this.$store.commit("savemodel", {});
            clearLoginData(); // 方法在index.html
            this.$dialog
              .alert({ message: response.msg })
              .then(() => {
                this.$router.push(this.fun.getUrl("login"));
              })
              .catch(() => {});
          }
        }
      );
    },
    gotoUrl(name, params = {}, query={}) {
      this.$router.push(this.fun.getUrl(name, params,query));
    },

  }
};
</script>

<style scoped lang="scss">
::v-deep .van-cell::after {
  border-bottom: 1px solid #fff;
}

::v-deep .van-cell__title {
  display: flex;
  text-align: left;
  align-items: center;

  img {
    width: 0.9375rem;
    margin: 0 0.4688rem 0 0;
  }
}

.fs-11 {
  font-size: 0.6875rem;
}

.color-666 {
  color: #666;
}

#sigin-in-subscribe-app {
  padding: 0.875rem 0.625rem;

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .invoice-main-color {
    color: #7f7f7f;
  }

  .block {
    width: 18.4rem;
    background-color: #fff;
    border-radius: 0.3125rem;
    padding: 0.9063rem 1.0625rem 1.2188rem 0.6875rem;
  }

  .main-color {
    color: #f14e4e;
    font-size: 0.9375rem;
    margin-bottom: 0.8438rem;
  }

  .main {
    border-radius: 0.3125rem;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 1.0313rem 2.5625rem 1.0625rem;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
  }

  .main-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
